<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            border: 1px solid black;
        }

        table tr {
            border: 1px solid #000;
            width: 500px;
            height: 30px;
        }

        table tr td {
            border: 1px solid #000;
            width: 120px;
            height: 30px;
            margin: 0;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                var table = $("<table border = \"1\" >");  
                table.appendTo(($("#createTable"))); 
                var hang = $("#hang").val();
                var lie = $("#lie").val();
                for(var i=1;i<=hang;i++){
                    var tr=$("<tr></tr>");  
                    tr.appendTo(table);
                    for(var j=0;j<lie;j++){  
                            var td=$("<td></td>");  
                                td.appendTo(tr);  
                        }  
                }
                $("#createTable").append("</table>");
                
            })
        })
    
    </script>
</head>

<body>
    
    <input id="hang" type="text" />行
    <input id="lie" type="text" />列
    <button>创建</button><br/><br/><br/><br/>
    <div id="createTable"></div>
</body>

</html>